<template>
  <view v-if="shenheStatus != 1 || !shenheAliStatus" class="box">
    <login v-if="stores.is_password_login"></login>
    <template v-else>
      <!-- 一键登录 -->
      <div class="wxLogin" v-if="miniProgross">
        <wx-sign @open="open"></wx-sign>

        <!-- #ifdef MP-WEIXIN -->
        <toolsPrivacy ref="toolsPrivacy"></toolsPrivacy>
        <!-- #endif -->
      </div>
      <view class="appLogin" v-else>
        <diySign></diySign>
      </view>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import diySign from "@/login/components/sign.vue";
import wxSign from "@/login/components/miniProgram.vue";
import { initModule } from "@/common/diyInit";
import toolsPrivacy from "@/components/tools/tools-privacy.vue";
import login from "../components/login.vue";

export default {
  components: {
    diySign,
    wxSign,
    Shenhe,
    toolsPrivacy,
    login
  },
  data() {
    return {
      tips: "",
      seconds: 60,
      CustomBar: "",
      HeaderBar: "",
      phone: "",
      code: "",
      // 登录自定义模块
      modules: [],
      // 页面设置
      pageSetting: {},
      miniProgross: false,
      menuButtonInfo: {}
    };
  },
  onLoad() {
    uni.setStorageSync("token", "");
    uni.setStorageSync("userInfo", false);
    // #ifdef MP-WEIXIN
    this.$utils.checkWxSession();
    // #endif
    // #ifdef  MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO
    this.miniProgross = true;
    // #endif
    // #ifndef MP-WEIXIN
    this.getModules();
    // #endif
  },
  created() {
    setTimeout(() => {
      // #ifdef  MP-WEIXIN
      uni.getSystemInfo({
        success: (e) => {
          let StatusBar = e.statusBarHeight,
            rect = wx.getMenuButtonBoundingClientRect();
          if (e.system.toLowerCase().indexOf("ios") > -1) {
            //IOS
            this.CustomBar = rect.bottom + (rect.top - StatusBar) * 2;
            this.HeaderBar = this.CustomBar - StatusBar;
          } else {
            //安卓
            this.HeaderBar = rect.height + (rect.top - StatusBar) * 2;
            this.CustomBar = this.HeaderBar + StatusBar;
          }
        }
      });
      // #endif
    }, 1);
  },
  computed: {
    boxStyle() {
      return {
        backgroundColor:
          this.pageSetting.backgroundType == 1
            ? this.pageSetting.backgroundColor
            : "",
        backgroundImage:
          this.pageSetting.backgroundType == 2
            ? `url(${this.pageSetting.backgroundUrl})`
            : "",
        opacity:
          this.pageSetting.backgroundType == 2
            ? this.pageSetting.backgroundOpacity
            : "",
        backgroundSize:
          this.pageSetting.backgroundType == 2
            ? this.pageSetting.backgroundRepeat == 1
              ? "100% 100%"
              : this.pageSetting.backgroundRepeat == 2
              ? "contain"
              : this.pageSetting.backgroundRepeat == 3
              ? ""
              : ""
            : "",
        backgroundRepeat:
          this.pageSetting.backgroundType == 2
            ? this.pageSetting.backgroundRepeat == 1
              ? ""
              : this.pageSetting.backgroundRepeat == 2
              ? "no-repeat"
              : this.pageSetting.backgroundRepeat == 3
              ? ""
              : ""
            : ""
      };
    },
    noLoginTabarPath() {
      return this.$store.getters.noLoginTabarPath;
    },
    routeType() {
      return this.$store.getters.routeType;
    }
  },
  methods: {
    // 获取登录模块模板
    async getModules() {
      try {
        const res = await this.$allrequest.diy.getSystemPage({ type: "sign" });
        if (res.code == 0 && res.data.template) {
          if (res.data.template.template && res.data.template.template != "") {
            res.data.template.template = JSON.parse(res.data.template.template);
            this.modules = res.data.template.template.template;
            this.pageSetting = res.data.template.template;
          } else {
            this.modules = initModule.sign.template;
            this.pageSetting = initModule.sign;
          }
        } else {
          this.modules = initModule.sign.template;
          this.pageSetting = initModule.sign;
        }
      } catch (e) {
        this.modules = initModule.sign.template;
        this.pageSetting = initModule.sign;
      }
    },
    async loginAction() {
      try {
        let result = await this.$allrequest.user.user_login({
          phone: this.phone,
          verify_code: this.code,
          _platform: "phone"
        });
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.afterLogin(result);
        }, 1000);
        // cid: plus.push.getClientInfo().clientid
      } catch (e) {}
    },
    async weiXinLogin(infoRes, code) {
      try {
        const share_user_id = uni.getStorageSync("parent_user_id");
        const page_type = uni.getStorageSync("page_type");

        let result = await this.$allrequest.user.user_login({
          ...infoRes,
          user_info: infoRes.userInfo,
          encrypted_data: infoRes.encryptedData,
          _platform: "wx",
          share_user_id: share_user_id ? share_user_id : 0,
          code,
          page_type
        });
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.afterLogin(result);
        }, 1000);
        // cid: plus.push.getClientInfo().clientid
      } catch (e) {}
    },
    async appWeixinLogin(infoRes) {
      try {
        let result = await this.$allrequest.user.user_login({
          ...infoRes,
          user_info: infoRes.userInfo,
          _platform: "app"
        });
        uni.showToast({
          title: result.msg,
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.afterLogin(result);
        }, 1000);
        // cid: plus.push.getClientInfo().clientid
      } catch (e) {}
    },
    afterLogin(result) {
      if (result.code == 0) {
        uni.setStorageSync("token", result.data.access_token);
        uni.setStorageSync("userInfo", result.data);
        uni.removeStorageSync("storeMdData");

        this.$store.commit("setUserInfo", result.data);
        if (this.noLoginTabarPath && this.routeType) {
          this.$utils.toUrl(this.noLoginTabarPath, this.routeType);
          setTimeout(() => {
            this.$store.commit("setNoLoginTabarPath", "");
            this.$store.commit("setRouteType", "");
          }, 0);
        } else {
          this.$utils.goBack();
        }
      }
    },
    toBind(type) {
      // #ifdef APP-PLUS
      uni.login({
        provider: type,
        success: (loginRes) => {
          uni.getUserInfo({
            provider: type,
            success: (infoRes) => {
              if (type == "weixin") {
                this.appWeixinLogin(infoRes);
              } else {
                this.qqLogin(infoRes);
              }
            }
          });
        }
      });
      // #endif
      //getUserProfile仅支持微信小程序 app登录需条件编译登录逻辑 TODO
      // #ifdef MP-WEIXIN
      uni.getUserProfile({
        desc: this.$t("login.authorization"),
        success: (infoRes) => {
          uni.login({
            provider: type,
            success: (loginRes) => {
              if (type == "weixin") {
                this.weiXinLogin(infoRes, loginRes.code);
              } else {
                this.qqLogin(infoRes);
              }
            }
          });
        },
        fail: (res) => {
          this.$utils.toast(this.$t("login.fail"));
        }
      });
      // #endif
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      // #ifdef APP-PLUS
      try {
        if (!this.$u.test.mobile(this.phone)) {
          this.$u.toast(this.$t("login.inputPhoneNumber"));
          return;
        }
        if (this.$refs.uCode.canGetCode) {
          // 向后端请求验证码
          let data = { phone: this.phone, code_type: "login" };
          await this.$allrequest.user.sms_code(data).then((res) => {
            if (res.code == 0) {
              uni.hideLoading();
              // 这里此提示会被this.start()方法中的提示覆盖
              this.$u.toast(this.$t("login.sentCode"));
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            } else {
              this.$u.toast(res.msg);
            }
          });
        } else {
          this.$u.toast(this.$t("login.countDown"));
        }
      } catch (e) {}

      // #endif
    },

    open() {
      this.$refs.toolsPrivacy.hasShowPrivacySetting();
    }
  },

  onShow() {
    if (this.stores.is_password_login) return;
    // #ifdef MP-WEIXIN
    this.$nextTick(() => {
      this.$refs.toolsPrivacy.hasShowPrivacySetting();
    });
    // #endif
  }
};
</script>

<style scoped lang="scss">
page {
  background-color: #ffffff;
}
.login_type_btn {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 50rpx;
}
.sub_actions {
  padding: 0 50rpx;
}
.top_actions {
  padding: 0 50rpx 40rpx 50rpx;
}
// .content {
//   padding: 50rpx 0;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   background-color: #ffffff;
// }
.loginInfo {
  margin-top: 20rpx;
  width: 650rpx;
  border-bottom: solid 2rpx #eaeaea;
  height: 80rpx;
  display: flex;
  align-items: center;
}
.loginBtn {
  width: 650rpx;
  height: 96rpx;
  margin: 100rpx auto;
  margin-bottom: 50rpx;
  background: linear-gradient(90deg, #f22300, #ff4c17);
  border-radius: 50rpx;
  text-align: center;
  font-family: inpinheiti;
  font-size: 30rpx;
  line-height: 96rpx;
  letter-spacing: 1rpx;
  color: #ffffff;
}

::v-deep {
  checkbox .wx-checkbox-input {
    border-radius: 50% !important;
    color: #ffffff !important;
    transform: scale(0.7);
  }

  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff;
    background: #f0250e;
    border-color: #f0250e !important;
  }
}
</style>
